<TabView #tabView class="tab-view" sdkExampleTitle sdkToggleNavButton>
    <GridLayout *tabItem="{title: 'Basic list'}">
        <!-- >> grouped-single-listview-two-lines-html -->
        <ListView [items]="countries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group"
            separatorColor="white">
            <ng-template nsTemplateKey="header" let-header="item">
                <Label class="list-group-item h2 bg-primary" isUserInteractionEnabled="false" color="white" [text]="header.name"></Label>
            </ng-template>

            <ng-template nsTemplateKey="footer" let-footer="item">
                <Label class="list-group-item" backgroundColor="gray" [text]="footer.name"></Label>
            </ng-template>

            <ng-template nsTemplateKey="cell" let-country="item">
                <StackLayout class="list-group-item">
                    <Label class="list-group-item-heading" [text]="country.name"></Label>
                    <Label class="list-group-item-text" [text]="'Continent: '+ country.continent"></Label>
                </StackLayout>
            </ng-template>
        </ListView>
        <!-- << grouped-single-listview-two-lines-html -->
    </GridLayout>
    <GridLayout *tabItem="{title: 'Dividers'}">
        <!-- >> grouped-single-listview-borders-two-lines-html -->
        <ListView [items]="countries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group"
            separatorColor="gray">
            <ng-template nsTemplateKey="header" let-header="item">
                <Label class="list-group-item bg-primary h2" isUserInteractionEnabled="false" color="white" [text]="header.name"></Label>
            </ng-template>

            <ng-template nsTemplateKey="footer" let-footer="item">
                <Label class="list-group-item h4" backgroundColor="gray" [text]="footer.name"></Label>
            </ng-template>

            <ng-template nsTemplateKey="cell" let-country="item">
                <StackLayout class="list-group-item">
                    <Label class="list-group-item-heading" [text]="country.name"></Label>
                    <Label class="list-group-item-text" [text]="'Continent: '+ country.continent"></Label>
                </StackLayout>
            </ng-template>
        </ListView>
        <!-- << grouped-single-listview-borders-two-lines-html -->
    </GridLayout>
    <GridLayout *tabItem="{title: 'Thumbnails'}">
        <!-- >> grouped-single-listview-two-lines-thumbs-html -->
        <ListView [items]="countries" [itemTemplateSelector]="templateSelector" (itemTap)="onItemTapFirstList($event)" class="list-group"
            separatorColor="gray">
            <ng-template nsTemplateKey="header" let-header="item">
                <Label class="list-group-item bg-primary h2" isUserInteractionEnabled="false" color="white" [text]="header.name"></Label>
            </ng-template>

            <ng-template nsTemplateKey="footer" let-footer="item">
                <Label class="list-group-item h4" backgroundColor="gray" [text]="footer.name"></Label>
            </ng-template>

            <ng-template nsTemplateKey="cell" let-country="item">
                <GridLayout rows="*, *" class="list-group-item" columns="auto, *">
                    <Image row="0" col="0" rowSpan="2" [src]="country.imageSrc" class="thumb img-circle"></Image>
                    <Label row="0" col="1" [text]="country.name" class="ist-group-item-heading p-15"></Label>
                    <Label row="1" col="1" class="list-group-item-text p-15" [text]="'Continent: '+ country.continent"></Label>
                </GridLayout>
            </ng-template>
        </ListView>
        <!-- << grouped-single-listview-two-lines-thumbs-html -->
    </GridLayout>
</TabView>